<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="examples/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="examples/css/cropper.min.css"/>
		<link rel="stylesheet" type="text/css" href="examples/css/main.css"/>
		
		
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css"/>

	</head>

	<body>
	    
	    <!--main-->
	    <div class="mycenter main">
	        <div class="goupload">
	        	<a href="#uploadimg">上传</a>
	        </div>
	        <div class="mylistout">
	        	<ul id="myimgbox" class="mui-table-view">
	        		<!--<li class="mui-table-view-cell msingle">
	        		    <img src="images/upload/123456/1478244450.jpg" alt="myimg" />
	        		    <div class="mui-row">
                            <div class="mui-col-xs-5">
                                <div class="mui-table-view-cell"> 
                                                                                                    魅力：<em>100</em>
                                </div>
                            </div>
                            <div class="mui-col-xs-7">
                                <div class="mui-table-view-cell mui-center" >
                                   <a class="deleteimg" href="javascript:void(0);">删除</a>
                                </div>
                            </div>
                        </div>
	        		</li>-->
	        	</ul>
	        </div>
	        <div class="addmyimg"> 
	        	<div class="addimgshow">
	        	    <div>
	        	    	<input type="file" id="imagebtn_A" name="imagebtn_A" class="selectimg_btn" accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp" value=""   />
	        	    </div>
	        		
	        	</div> 
	        	<div class="mui-center">
	        		<button type="button" id="uploadimg" class="mui-btn mui-btn-danger mui-btn-outlined mywidbtn" data-loading-text="上传中" >上传</button> 
	        		
	        	</div>
	        	
	        	
	        </div>
	        
	        
	        
	        
	        
	        
	        
	        
	          <div class="container" id="crop-avatar">

                    <!-- Current avatar -->
                    <div class="avatar-view" title="Change the avatar">
                      <img src="images/iconfont-tianjia-big.png" alt="Avatar">
                    </div>
                
                    <!-- Cropping modal -->
                    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <form class="avatar-form" action="http://192.168.1.130/myweb/meilidaluandou/php/uploadimg.php" enctype="multipart/form-data" method="post">
                            <div class="modal-header">
                              <button class="close" data-dismiss="modal" type="button">&times;</button>
                              <h4 class="modal-title" id="avatar-modal-label">Change Avatar</h4>
                            </div>
                            <div class="modal-body">
                              <div class="avatar-body">
                
                                <!-- Upload image and data -->
                                <div class="avatar-upload">
                                  <input class="avatar-id" id="avatar_id" name="avatar_id" type="hidden" value="">
                                  <input class="avatar-src" name="avatar_src" type="hidden">
                                  <input class="avatar-data" name="avatar_data" type="hidden">
                                  <label for="avatarInput">Local upload</label>
                                  <input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
                                </div>
                
                                <!-- Crop and preview -->    
                                <div class="row"> 
                                  <div class="col-md-9">
                                    <div class="avatar-wrapper"></div>
                                  </div>
                                  <div class="col-md-3">
                                    <div class="avatar-preview preview-lg"></div>
                                    <div class="avatar-preview preview-md"></div>
                                    <div class="avatar-preview preview-sm"></div>
                                  </div>
                                </div>
                
                                <div class="row avatar-btns">
                                  <div class="col-md-9">
                                    <div class="btn-group">
                                      <button class="btn btn-primary" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees">Rotate Left</button>
                                      <button class="btn btn-primary" data-method="rotate" data-option="-15" type="button">-15deg</button>
                                      <button class="btn btn-primary" data-method="rotate" data-option="-30" type="button">-30deg</button>
                                      <button class="btn btn-primary" data-method="rotate" data-option="-45" type="button">-45deg</button>
                                    </div>
                                    <div class="btn-group">
                                      <button class="btn btn-primary" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees">Rotate Right</button>
                                      <button class="btn btn-primary" data-method="rotate" data-option="15" type="button">15deg</button>
                                      <button class="btn btn-primary" data-method="rotate" data-option="30" type="button">30deg</button>
                                      <button class="btn btn-primary" data-method="rotate" data-option="45" type="button">45deg</button>
                                    </div>
                                  </div>
                                  <div class="col-md-3">
                                    <button class="btn btn-primary btn-block avatar-save" type="submit">Done</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- <div class="modal-footer">
                              <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
                            </div> -->
                          </form>
                        </div>
                      </div>
                    </div><!-- /.modal -->
                
                    <!-- Loading state -->
                    <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
                  </div>
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                <div class="imgcrop_obj" id="imgcrop_obj">
                	
                
                      <!--show-->
                     <div id="imgshow">
                         <img src="images/images/image01.png" alt="image" style="width:100%;display: block;">
                     </div> 
                     
                     <button id="crop_btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">裁剪</button>
                     
                     <div class="preimg" id="preimg">
                     	
                     </div>
                     
                     <!--select img-->
                     <form action="#" method="post">
                         
                         <!--btn-->
                         <div class="">
                         	<input type="file" name="select_file" id="select_file" value="" />
                         	<input type="hidden" name="crop_data" id="crop_data" value="" />
                         </div>
                         
                         <!--crop img-->
                         <div class="">
                             <!--crop area-->
                         	<div class="">
                         		
                         	</div>
                         	<!--crop result-->
                         	<div class="">
                         		
                         	</div>
                         </div>
                     	
                     	<input type="submit" value="上传"/>
                     	
                     	
                     </form>
                      
                    <div class="upload_state" id="upload_state"></div>
                      
                </div>        
                  
                  

                  





	    </div>
	    
	    
	    
	    
        <script src="js/jquery-1.11.0.min.js"></script>
	    <script src="js/mui.min.js"></script>
	    <script src="js/app.js"></script>
	    <script src="js/myajax.js"></script>
	    
	    
	    <script src="examples/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="examples/js/cropper.min.js" type="text/javascript" charset="utf-8"></script>
	    <!--<script src="examples/js/main.js" type="text/javascript" charset="utf-8"></script>-->
	    
	    
	    
	    <script>
	    	jQuery(function(){
	    	    
	    	    function cropinit(){
	    	       jQuery('#imgshow > img').cropper({
                        checkImageOrigin: true,
                        aspectRatio: 1 / 1,
                        autoCropArea: 0.5
                    }); 
    	    	};
    	    	cropinit();
    	    	
    	    	function confirm() {
//                  $("#showEdit").fadeOut();
                    var $image = jQuery('#imgshow > img');
                    var dataURL = $image.cropper("getCroppedCanvas");//找死了
                    var imgurl=dataURL.toDataURL("image/png",1.0);//这里转成base64 image，img的src可直接使用
                    $("#preimg").html('<img src="'+imgurl+'">');
                 };
	    	    
	    	    jQuery("#crop_btn").on("click",function(){
	    	      confirm();  
	    	    });
	    	    
                
                

	    	    
	    	    
	    	    
	    	    
	    	});
	    </script>
	    
	    
	    
	    
	    <script>
            (function($, doc) {  
                $.init();
                $.plusReady(function() {
                    plus.screen.lockOrientation("portrait-primary");
                    var account = app.getUsers().account;//获取storage中的账号
                    
                    jQuery("#avatar_id").val("123456");
                    
                    //页面加载完成后，ajax加载个人所上传图片//// 
                    var myinfo = {
                        "account":account
                    }
                    myajax.getMyImages(myinfo,function(data){
                        
                        var appendmyimagesAll = "";
                        
                        for(var i=0;i<data.length;i++){ 
                            var imgi = data[i].address.substring(3);    
                             
                            var appendmyimghtml = '<li class="mui-table-view-cell msingle">\
                                                            <img src="'+imgi+'" alt="myimg" />\
                                                            <div class="mui-row">\
                                                                <div class="mui-col-xs-5">\
                                                                    <div class="mui-table-view-cell">\
                                                                                      魅力：<em>'+data[i].love+'</em>\
                                                                    </div>\
                                                                </div>\
                                                                <div class="mui-col-xs-7">\
                                                                    <div class="mui-table-view-cell mui-center" >\
                                                                       <a class="deleteimg" href="javascript:void(0);" data-id="'+data[i].id+'">删除</a>\
                                                                    </div>\
                                                                </div>\
                                                            </div>\
                                                        </li>';
                                                        
                       appendmyimagesAll+=appendmyimghtml;  
                        } 
                        
                        jQuery('#myimgbox').append(appendmyimagesAll); 

                    });
                    ///////////////////////////////////////////////
                    
                    

                    //选择图片，显示图片，提示上传/////////////////////
                    jQuery(doc).delegate(".selectimg_btn","change",function(){
                        var files = this.files ? this.files : [];
                        var b=jQuery(this).attr("id");
                        if (!files.length || !window.FileReader){
                          jQuery("#imagebtn_A").val("").parent().css("background-image","none");
                          return;  
                        };
                        if (/^image/.test( files[0].type)){
                            var reader = new FileReader();
                            reader.readAsDataURL(files[0]);
                            reader.onload = function(){ 
                                jQuery("#"+b).parent("div").css("background-image", "url("+this.result+")");
                                plus.nativeUI.toast("图片已选择，请点击上传。");
                            }
                        }else{
                            plus.nativeUI.toast("请选择图片！");
                            jQuery("#imagebtn_A").val("");
                            return;
                        }
                    });
                    ////////////////////////////////////////////////////
                    
                    
                    
                    //上传图片//////////////////////////////////////////
                    jQuery(doc).delegate("#uploadimg","tap",function(){
                        
                        

                        var filebox = jQuery("#imagebtn_A");
                        var filevalue = filebox.val();
                        if(filevalue ==""||filevalue=="undefined"){
                            plus.nativeUI.toast("请先选择图片！"); 
                            return;
                        };
                        
                        //验证图片大小
                        var preimgdom = document.getElementById("imagebtn_A");  
                        var preimgSize =  preimgdom.files[0].size/1024/1000;
                        if(preimgSize>3){
                            plus.nativeUI.toast("上传失败，图片不能大于3M");
                            return; 
                        }
                        
                        var formdata = new FormData();//ie9和以下不支持
                        var fileobj = filebox.get(0).files;
                        formdata.append("imguser", account); 
                        formdata.append("imgFile", fileobj[0]);  
                        
                         
                        
//                      mui("#uploadimg").button('loading');//切换为loading状态
                        jQuery("#uploadimg").html("上传中......").attr("disabled","disabled");
                        
                        
                        myajax.uploadimg(formdata,function(data){
                            if(data.state==1){
                                
//                              var imgurlAll = "http://115.28.246.2/meilidaluandou/"+data.info;
                                var imgurlAll = "http://192.168.1.130/myweb/meilidaluandou/"+data.info; //测试用
                                    var appendimghtml = '<li class="mui-table-view-cell msingle">\
                                                            <img src="'+imgurlAll+'" alt="myimg" />\
                                                            <div class="mui-row">\
                                                                <div class="mui-col-xs-5">\
                                                                    <div class="mui-table-view-cell">\
                                                                                      魅力：<em>0</em>\
                                                                    </div>\
                                                                </div>\
                                                                <div class="mui-col-xs-7">\
                                                                    <div class="mui-table-view-cell mui-center" >\
                                                                       <a class="deleteimg" href="javascript:void(0);" data-id="'+data.imgid+'">删除</a>\
                                                                    </div>\
                                                                </div>\
                                                            </div>\
                                                        </li>';
                                   
                                    var appendparent = jQuery("#myimgbox");  
                                    
                                    //图片加载成功后，再展示到页面
                                    var image = new Image();
                                    image.src=imgurlAll;
                                    image.onload=function(){ 
                                        appendparent.append(appendimghtml);
                                        filebox.val("").parent().css("background-image","none"); 
//                                      mui("#uploadimg").button('reset');//切换为loading状态
                                        jQuery("#uploadimg").html("上传").removeAttr("disabled");

                                    };

                                }else{
                                    plus.nativeUI.toast(data.info); 
//                                  mui("#uploadimg").button('reset');//切换为loading状态
                                    jQuery("#uploadimg").html("上传").removeAttr("disabled");
                                    return;
                                }
                        });   
                        
                    });
                    ///////////////////////////////////////////
                    
                    
                    
                    //删除图片////////////////////////////////
                    jQuery(document).delegate(".deleteimg","tap",function(){
                       var isdele = confirm("确定要删除吗？");  
                       if(isdele!=true){
                           return;
                       }
                       var deleobj = jQuery(this).parents('li');
                       
                       var deleimgid = jQuery(this).attr("data-id");
                       var deleimginfo = {"deleimgid":deleimgid};
                       
                       myajax.deleteImg(deleimginfo,function(data){
                          if(data.state==1){
                              deleobj.remove();
                          }else{
                              plus.nativeUI.toast(data.errinfo); 
                              return;
                          }
                       });
                    });
                    ////////////////////////////////////////////


                });  
  
            }(mui, document));
        </script>
	    
	    
	</body>

</html>